{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Table of Contents\n",
"* [1. Study in Spirographics](#1.-Study-in-Spirographics)\n",
"\t* [1.1 Goal](#1.1-Goal)\n",
"\t* [1.2 Preliminaries](#1.2-Preliminaries)\n",
"\t\t* [1.2.1 Defining a function that returns a value](#1.2.1-Defining-a-function-that-returns-a-value)\n",
"\t\t* [1.2.2 Loops](#1.2.2-Loops)\n",
"\t* [1.3 Trigonometry](#1.3-Trigonometry)\n",
"\t* [1.4 Rotating a line around the center](#1.4-Rotating-a-line-around-the-center)\n",
"\t* [1.5 Rotating two lines](#1.5-Rotating-two-lines)\n",
"\t* [1.6 Conclusion](#1.6-Conclusion)\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 1. Study in Spirographics"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## 1.1 Goal"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"First, checkout this animated experiment called \"Orbits\" by Alexey Lebedev: \n",
"\n",
"http://explord.com/experiments/orbits/\n",
"\n",
"How would you describe, in the abstract, how these animations are made?\n",
"\n",
"_Insert insight here._\n",
"\n",
"This is very similar to a a toy many had named Spirograph:\n",
"\n",
"\n",
"\n",
"Our goal for Assignment #3 is to create art that can be seen as tracing the trajectory of an object through space and time. We'll look at two methods for making such art: Spirographics and Physics Simulations. This notebook looks at the first."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## 1.2 Preliminaries"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 1.2.1 Defining a function that returns a value"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Before we begin, we need to learn a new technique in Processing: how to write a function that **returns** something. There are two things you need:\n",
"\n",
"1. A return type on the function definition (replace `void` with something like `int` or `float`).\n",
"2. Use the `return` keyword in the function definition\n",
"\n",
"Example:\n",
"\n",
"Consider the concept `distance` from geometry. Do you remember the formula? \n",
"\n",
"It is simply stated as: _the square root of the sum of the squared differences of each dimension (eg, x and y)_. It comes from the relationship:\n",
"\n",
"$ c^2 = a^2 + b^2 $\n",
"\n",
"where a, b, and c are the lengths of a triangle with 90 degree angle:\n",
"\n",
"\n",
"\n",
"If we \"solve for c\" then we take the square root of each side, and get:\n",
"\n",
"$ c = \\sqrt{ a^2 + b^2 }$\n",
"\n",
"The length $a$ is the distance between points B and C on the y axis. That is, you just take the difference of the y's of B and C. Likewise, the length $b$ is the distance between points $A$ and $C$ on the x axis.\n",
"\n",
"Let's break this down:\n",
"\n",
"First, consider that we have two points (x1, y1) and (x2, y2). We want to know how far apart they are. \n",
"\n",
"1. First, we find the differences of each dimension: `x1 - x2` and `y1 - y2`\n",
"2. Then we square each of those. That is, we raise those difference to the 2nd power. Or, more simply, we just multiply each times itself: `(x1 - x2) * (x1 - x2)` and `(y1 - y2) * (y1 - y2)`\n",
"3. Finally, we take the square root of the sum of those, using the `sqrt` function\n",
"\n",
"Putting those all together looks like:\n",
"\n",
"```java\n",
"sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)))\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The last thing we need to do is put that in a function definition:\n",
"\n",
"```java\n",
"float distance(float x1, float y1, float x2, float y2) {\n",
" return sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));\n",
"}\n",
"```\n",
"\n",
"or:\n",
"\n",
"```java\n",
"float distance(float x1, float y1, float x2, float y2) {\n",
" return sqrt(sq(x1 - x2) + sq(y1 - y2));\n",
"}\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Note that we have defined a new function, called `distance` that takes 4 numbers (x1, y1, x2, y2) and returns the distance between those two points. To _call_ the function, we put parentheses after the function name, _pass in_ arguments, and save the returned value in $d$:\n",
"\n",
"```java\n",
"d = distance(50, 50, 10, 10);\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Let's try it:"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" var component = document.getElementById(\"sketch_1\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"state_1\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" component = document.getElementById(\"controls_div_1\");\n",
" if (component != undefined)\n",
" component.remove();\n",
" require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
" // FIXME: Stop all previously running versions (?)\n",
" var processingInstance = Processing.getInstanceById(\"canvas_1\");\n",
" if (processingInstance != undefined && processingInstance.isRunning())\n",
" processingInstance.noLoop();\n",
" });\n",
"\n",
"\n",
" var output_area = this;\n",
" // find my cell element\n",
" var cell_element = output_area.element.parents('.cell');\n",
" // which cell is it?\n",
" var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
" // get the cell object\n",
" var cell = Jupyter.notebook.get_cell(cell_idx);\n",
"\n",
" function jyp_print(cell, newline) {\n",
" return function(message) {\n",
" cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
" content: {text: message + newline,\n",
" name: \"stdout\"}});\n",
" }\n",
" }\n",
" window.jyp_println = jyp_print(cell, \"\\n\");\n",
" window.jyp_print = jyp_print(cell, \"\");\n",
"\n",
" require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
" Processing.logger.println = jyp_print(cell, \"\\n\");\n",
" Processing.logger.print = jyp_print(cell, \"\");\n",
" });\n",
"\n",
"\n",
" "
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
"